<template>
 <div :style="styleObj">
    <v-chart :options="options" autoresize/>
  </div>
</template>

<script>



export default {
  name: "widgetSemicircle",
   props: {
    value: Object,
    ispreview: Boolean
  },
  data() {
    return {
      optionsStyle: {}, // 样式
      optionsData: {}, // 数据
      optionsCollapse: {}, // 图标属性
      optionsSetup: {},
      options: {
      title: {
        //text: '测试',
        textStyle: {
          color: '#000',
          fontSize: 32,
          fontWeight: 'bold'
        },
        left: 'center',
        top: 100,
        bottom: '69%',
        itemGap: 60
      },
      tooltip: {
        show: false
      },
      legend: {
        orient: 'horizontal',
        bottom: "5%",
        selectedMode:false,
        data: []
      },
      series: [
        {
          type: 'pie',
          //起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
          startAngle: 0,
          hoverAnimation: false,
          tooltip: {},
          radius: ['0%', '47%'],
          center: ['50%', '80%'],
         
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [
            {
              value: 1,
              itemStyle: {
                normal: {
                  color: 'rgba(80,150,224,0)'
                }
              }
            },
            {
              value: 1,
              itemStyle: {
                normal: {
                  color: 'rgba(80,150,224,1)'
                }
              },
               label: {
                  position: 'center',
                  fontSize: 22,
                  color:'#FFFFFF',
                  formatter: (params) => {
                    return params.name + '\n\n';
                  }
              },
            }
          ]
        },
        {
          name: '数据',
          type: 'pie',
          startAngle: 0,
          hoverAnimation: false,
          radius: ['70%', '87%'],
          center: ['50%', '80%'],
          label: {
            position: 'inner',
            fontSize: 14,
            show:false,
          },
            itemStyle: {
            borderRadius: 10,
            borderColor: '#00000000',
            borderWidth: 10
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: []
        }
      ]
      }
    };
  },

  //预留色
  computed: {
    styleObj() {
      console.log('computed')
      return {
        position: this.ispreview ? "absolute" : "static",
        width: this.optionsStyle.width + "px",
        height: this.optionsStyle.height + "px",
        left: this.optionsStyle.left + "px",
        top: this.optionsStyle.top + "px",
        background: this.optionsSetup.background
      };
    }
  },
  watch: {
    value: {
      handler(val) {
        this.optionsStyle = val.position;
        this.optionsData = val.data;
        this.optionsCollapse = val.collapse;
        this.optionsSetup = val.setup;
        this.editorOptions();
      },
      deep: true
    }
  },
  created() {
    this.optionsStyle = this.value.position;
    this.optionsData = this.value.data;
    this.optionsCollapse = this.value.collapse;
    this.optionsSetup = this.value.setup;
    this.editorOptions();
  },
  methods: {
  // 修改图标options属性
    editorOptions() {
      this.setOptionsColor();
      this.setOptionsData();
    },
    // 图例颜色修改
    setOptionsColor() {
      const optionsSetup = this.optionsSetup;
      const customColor = optionsSetup.customColor;
      if (!customColor) return;
      const arrColor = [];
      for (let i = 0; i < customColor.length; i++) {
        arrColor.push(customColor[i].color);
      }
      this.options.color = arrColor;
      this.options = Object.assign({}, this.options);
    },
     // 处理数据
    setOptionsData() {
      const optionsData = this.optionsData; // 数据类型 静态 or 动态
      optionsData.dataType == "staticData"
        ? this.staticDataFn(optionsData.staticData)
        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
    },
    staticDataFn(val) {
     this.setSeriesData(val);
    },
    dynamicDataFn(val, refreshTime) {
      if (!val) return;
      if (this.ispreview) {
        this.getEchartData(val);
        this.flagInter = setInterval(() => {
          this.getEchartData(val);
        }, refreshTime);
      } else {
        this.getEchartData(val);
      }
    },
    getEchartData(val) {
      const data = this.queryEchartsData(val);
      data.then(res => {
        this.renderingFn(res);
      });
    },
    renderingFn(val) {
        this.setSeriesData(val);
    },
    setSeriesData(val){
      const series = this.options.series;
      let colorList = this.options.color;

      //获取第二个环
      //设置data
      let sum  = 0;
      let legend = [];
      const newData = val.map((item,index)=>{
      sum += item.value;
      let currentColor = colorList[index%colorList.length]
      legend.push({
        name: item.name,
        textStyle:{
          color:currentColor
        }
      });
      return { 
              value: item.value,
              name: item.name,
              itemStyle: {
                normal: {
                  color: currentColor
                }
              },
              label:{
                show:true,
                color: '#fff',
                formatter: function (params) {
                    return params.value
                }
              }
            }
      })
      series[1].data = [{ 
              value: sum,
              name: '',
              itemStyle: {
                normal: {
                  color: 'rgba(255,255,255,0)'
                }
              }
            },...newData];
      series[0].data[1].name = sum + '项';
      this.options.legend.data = legend
    }

  }
};
</script>

<style scoped lang="scss">
.echarts {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
